<template>
	<view class="w100p flex-center" style="padding-top: 20px;">
		<view class="flex">
			<view class="flex column-center" style="height:50px;justify-content: center;">
				<view class="vAlign-center" style="height: 50px;width: 40px;">
					<u-icon name="arrow-left" size="14" v-show="current>0" @click="pre"></u-icon>
				</view>

				<view class="flex el-pager">

					<li v-show="current>6" @click="item==current+1?' ':jumpTo(0)">
						{{'1'}}{{' ...'}}
					</li>
					<li @click="item==current+1?' ':jumpTo(item-1)" v-for="(item,index) in pageFilter(pageList)"
						:key="index" :class="item==current+1?'active':''">
						{{item}}
					</li>
					<li v-show="current<pageList.length-3&&pageList.length>5" @click="item==current+1?' ':jumpTo(pageList.length-1)">
						{{' ...'}}{{pageList.length}}
					</li>
				</view>
				<view class="flex-end" style="height: 50px;width: 40px;">
					<u-icon name="arrow-right" size="14" @click="next" v-show="current+1<pageNum"></u-icon>
				</view>
				<view></view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		name: "pagination",
		data() {
			return {

			};
		},
		props: {
			pageList: {
				type: Array,
				default: []
			},
			current: {
				type: [String, Number], // 允许字符串或数字类型
				default: 0
			},
			totalData: {
				type: [String, Number],
				default: 0
			},
			pageSize: {
				type: [String, Number],
				default: 0
			}
		},

		computed: {
			pageNum() {
				return Math.ceil(this.totalData / this.pageSize)
			},
			pageFilter() {
				return function(e) {
					let first = e.slice(0, 9)
					if (e.length < 7) {
						return e
					} else {
						if (this.current > 6) {

							let middleF = e.slice(this.current - 3, this.current)
							let middeE = e.slice(this.current, this.current + 5)

							// let end = e.slice(e.length - 2, e.length - 1)

							return [...middleF, ...middeE]
						} else {
							return e.slice(0, 8)
						}
					}

				}
			}
		},
		methods: {
			next() {
				console.log('nextPagenextPage')
				this.$emit('nextPage')

			},
			pre() {
				console.log('preprepre')
				this.$emit('prePage')
			},
			jumpTo(e) {
				// this.current = e
				this.$emit('jumpTo', e)
				console.log('--', e)
			}
		}

	}
</script>

<style>
	.el-pager {
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
		list-style: none;
		font-size: 0;

	}

	.el-pager li {
		height: 30px;
		line-height: 30px;
		font-size: 14px;
		color: #606266;
		min-width: 25px;
		/* width: 25px; */
		padding: 0;
		font-weight: 400;
		margin-right: 4px;
		text-align: center;
		transition-duration: 0.2s;
	}

	.el-pager li.active {
		background: #027dee;
		border-radius: 2px;
		color: #fff !important;
	}
</style>